import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Text, ScrollView, Image, TouchableOpacity } from "react-native";
import CommonContext from '@/utils/createContext'
import NoneHistory from "../NoneHistory";
import moment from "moment";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const ReceiveHistory = () => {

    const { transferData, coinType, handlePressItem } = useContext(CommonContext)

    return (
        <View style={styles.container}>
            <ScrollView style={{ flex: 1 }}>
                {transferData && transferData.showReceive ? <View style={styles.bodyContent}>
                    {transferData && transferData.list && transferData.list.map((item, index) => {
                        if (item.type === 'receive') {
                            return (
                                <TouchableOpacity key={index} style={styles.itemContent} onPress={() => { handlePressItem(item) }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                        <Image source={require('@/assets/imgs/in.png')} style={styles.img} />
                                        <View style={{ justifyContent: 'center', marginLeft: 12 * ratio }}>
                                            <Text style={styles.title1}>Receive</Text>
                                            <Text ellipsizeMode='middle' numberOfLines={1}
                                                style={{ ...styles.title2, width: 60 * ratio }}>
                                                {item.from_address}
                                            </Text>
                                        </View>
                                    </View>
                                    <View style={{ justifyContent: 'center', marginRight: 28 * ratio }}>
                                        <Text style={{ ...styles.title1, textAlign: 'right' }}>
                                            {item && item.valueLabel}
                                        </Text>
                                        <Text style={styles.title2}>{moment(item.timestamp).format('YYYY-MM-DD HH:mm:ss')}</Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        }
                    })}
                </View> : <View style={{ height: 410 * ratio }}>
                    <CommonContext.Provider value={{ coinType }}>
                        <NoneHistory />
                    </CommonContext.Provider>
                </View>}
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: 341 * ratio,
        height: 410 * ratio
    },
    bodyContent: {
        alignItems: 'center',
        marginTop: 25 * ratio
    },
    itemContent: {
        width: 322 * ratio,
        height: 61 * ratio,
        backgroundColor: '#F5FAFF',
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    img: {
        width: 29 * ratio,
        height: 29 * ratio,
        marginLeft: 23 * ratio
    },
    title1: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#2A2A2A",
        lineHeight: 16
    },
    title2: {
        fontSize: 10,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#898989",
        lineHeight: 13
    }
})
export default ReceiveHistory